<template>
  <div class="containet">
    <div class="app-containet">
      <el-page-header content="车辆详情" />
      <el-card class="box-card">
        <el-tabs>
          <el-tab-pane label="用户管理" name="基本信息" />
          <el-tab-pane label="配置管理" name="行驶证信息" />
        </el-tabs>
        <el-form>
          <el-descriptions class="tt" :colon="false">
            <el-descriptions-item label="车辆编号">
              <el-input :disabled="true" /></el-descriptions-item>
            <el-descriptions-item label="车牌号码">
              <el-input />
            </el-descriptions-item>
            <el-descriptions-item label="车型名称">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-descriptions-item>

            <el-descriptions-item label="车辆体积">
              <el-input placeholder="请输入内容">
                <template slot="append">m²</template>
              </el-input>
            </el-descriptions-item>
            <el-descriptions-item label="车辆载重">
              <el-input placeholder="请输入内容">
                <template slot="append">吨</template>
              </el-input>
            </el-descriptions-item>
            <el-descriptions-item label="GPSID">
              <el-input />
            </el-descriptions-item>
            <el-descriptions-item>
              <div class="demo-image__preview">
                <span>图片信息:</span>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="srcList"
                />
                <el-image
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="srcList"
                />
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </div>
            </el-descriptions-item>

          </el-descriptions>
        </el-form>
      </el-card>
      <el-card class="box-cardd">
        <el-button type="danger">保存</el-button>
        <el-button type="danger">取消</el-button>
      </el-card>
    </div>
  </div>
</template>
<script>
// import { particulars } from '@/api/Example '
export default {
  name: 'Employee',
  data() {
    return {
      url: 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/slwl/db52da05-5136-46e7-9c1a-4c2a9e61754a.png',
      srcList: [
        'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/slwl/db52da05-5136-46e7-9c1a-4c2a9e61754a.png',
        'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/slwl/db52da05-5136-46e7-9c1a-4c2a9e61754a.png'
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  created() {},
  methods: {

  }
}
</script>
<style scoped>
.box-cardd {
  width: 1300px;
  margin: 10px auto;
  text-align: center;
}
.box-card {
  width: 1300px;
  height: 500px;
  margin: 10px auto;
}
::v-deep .el-descriptions-item__container {
  width: 300px;
  display: flex;
  align-items: center;
}
.demo-image__preview{
    width: 400px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    width: 130px;
    height: 130px;
    border: 1px solid #8c939d;
    line-height: 130px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
